<template>
    <div class="list">
        <swiper :options="swiperOption" ref="mySwiper">
            <swiper-slide v-for="(v,i) in dataList" :key="i">
                <div class="listone" v-for="(value,index) in v" :key="index">
                    <img :src="value.imgUrl" alt="" class="listimg">
                   <p>{{value.desc}}</p>
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
export default {
    name:'list',
    props:['list'],
    data:function(){
        return {
            swiperOption:{
                
            },
            datalist:[]
        }
    },
    // 计算属性!!!!!!
    computed: {
        dataList(){
            var newArr=this.list;
            var num = Math.ceil(newArr.length/8);
            for(var i= 0;i<num;i++){
                this.datalist[i]=newArr.splice(0,8);
            }
            return this.datalist;
        }  
     },
    
}
</script>

<style lang="less" scoped>
    .listone{
        float: left;
        width: 25%;
        text-align: center;
        .listimg{
            width: 1.35rem;
            height:1.35rem;
            margin: 0.2rem 0;
        }
    }
</style>
